﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="exemplo_MS_Manual.aspx.cs" Inherits="WebApplication1.exemplo_MS_Manual" %>

<%@ Register Assembly="Libero.FusionCharts" Namespace="Libero.FusionCharts.Control" TagPrefix="fcl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>
    body
        {
        	font-family: Calibri, Arial, Tahoma;
        }
        .container
        {
    	    width:800px;
    	    border:solid 1px #ccc;
    	    padding-top: 10px;
    	    padding-bottom:10px;
        }
    pre
	{margin-bottom:.0001pt;
	font-size:10.0pt;
	font-family:"Courier New";
	        margin-left: 0cm;
            margin-right: 0cm;
            margin-top: 0cm;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>Multi Series Chart, adding data manually.</h3>

        <fcl:FChart runat="server" ID="chtProductSales" Width="600" Height="280" />

        <br /><br />
        In your ASPX page you simply need to add a FChart control. It acts just as a place holder for the chart. 
        <br />
        Here you’ll also define the width and height of your chart.
        <div class="container">
        
            <pre><span style="font-family: Consolas; background: yellow">&lt;%</span><span 
                style="font-family:Consolas;color:blue">@</span><span 
                style="font-family:Consolas">&nbsp;<span style="color:maroon">Register</span>&nbsp;<span 
                style="color:red">Assembly</span><span style="color:blue">=&quot;Libero.FusionCharts&quot;</span>&nbsp;<span 
                style="color:red">Namespace</span><span style="color:blue">=&quot;Libero.FusionCharts.Control&quot;</span>&nbsp;<span 
                style="color:red">TagPrefix</span><span style="color:blue">=&quot;fcl&quot;</span>&nbsp;<span 
                style="background: yellow">%&gt;</span><o:p></o:p></span></pre>
            <pre><span style="font-family:Consolas;color:blue">&lt;</span><span style="font-family:
Consolas;color:maroon">fcl</span><span style="font-family:Consolas;color:blue">:</span><span 
                style="font-family:Consolas;color:maroon">FChart</span><span style="font-family:
Consolas">&nbsp;<span style="color:red">runat</span><span style="color:blue">=&quot;server&quot;</span>&nbsp;<span 
                style="color:red">ID</span><span style="color:blue">=&quot;chtProductSales&quot;</span>&nbsp;<span 
                style="color:red">Width</span><span style="color:blue">=&quot;600&quot;</span>&nbsp;<span 
                style="color:red">Height</span><span style="color:blue">=&quot;280&quot;</span>&nbsp;<span 
                style="color:blue">/&gt;</span><o:p></o:p></span></pre>
        
        </div>
        <br />

        In your code behind you will define:
        <ul>
            <li>The type of chart you want (see supported charts).</li>
            <li>All appearence properties, as backgroung color, titles, and so on.</li>
            <li>And the main part, the data.</li>
        </ul>
        <div class="container">
        
            <pre><span style="font-family:Consolas;color:#2B91AF">MSColumn3DChart</span><span 
                style="font-family:Consolas">&nbsp;oChart&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;<span 
                style="color:#2B91AF">MSColumn3DChart</span>();

<span style="color:green">//&nbsp;Set&nbsp;properties</span>
oChart.Background.BgColor&nbsp;=&nbsp;<span style="color:#A31515">&quot;ffffff&quot;</span>;
oChart.Background.BgAlpha&nbsp;=&nbsp;50;
oChart.ChartTitles.Caption&nbsp;=&nbsp;<span style="color:#A31515">&quot;Categories&nbsp;by&nbsp;country&quot;</span>;
oChart.ChartTitles.SubCaption&nbsp;=&nbsp;<span style="color:#A31515">&quot;Annual&nbsp;report&nbsp;(US$)&quot;</span>;

<span style="color:green">//&nbsp;Set&nbsp;a&nbsp;template</span>
oChart.Template&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;Libero.FusionCharts.Template.<span 
                style="color:#2B91AF">OceanTemplate</span>();

<span style="color:green">//&nbsp;Set&nbsp;data</span>
<span style="color:green">//&nbsp;Add&nbsp;Categories&nbsp;Data.</span>
oChart.CategorySet.FontColor&nbsp;=&nbsp;<span style="color:#A31515">&quot;0000FF&quot;</span>;
oChart.CategorySet.CategoryElementSet.Add(<span style="color:blue">new</span>&nbsp;<span 
                style="color:#2B91AF">MSCategoryElement</span>(<span style="color:#A31515">&quot;Brazil&quot;</span>));
oChart.CategorySet.CategoryElementSet.Add(<span style="color:blue">new</span>&nbsp;<span 
                style="color:#2B91AF">MSCategoryElement</span>(<span style="color:#A31515">&quot;India&quot;</span>));
oChart.CategorySet.CategoryElementSet.Add(<span style="color:blue">new</span>&nbsp;<span 
                style="color:#2B91AF">MSCategoryElement</span>(<span style="color:#A31515">&quot;China&quot;</span>));

<span style="color:green">//&nbsp;Add&nbsp;Series&nbsp;data&nbsp;in&nbsp;the&nbsp;correct&nbsp;order.</span>
<span style="color:#2B91AF">MSDataSet</span>&nbsp;msDs;
msDs&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSDataSet</span>(<span 
                style="color:#A31515">&quot;Eletronics&quot;</span>,&nbsp;<span style="color:#A31515">&quot;ff0000&quot;</span>);
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(15000));
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(30000));
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(45000));
oChart.DataSetList.Add(msDs);

msDs&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSDataSet</span>(<span 
                style="color:#A31515">&quot;Computers&quot;</span>,&nbsp;<span style="color:#A31515">&quot;00ff00&quot;</span>);
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(80000));
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(50000));
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(20000));
oChart.DataSetList.Add(msDs);

msDs&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSDataSet</span>(<span 
                style="color:#A31515">&quot;Mobiles&quot;</span>,&nbsp;<span style="color:#A31515">&quot;0000ff&quot;</span>);
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(15000));
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(30000));
msDs.SetElementSet.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">MSSetElement</span>(70000));
oChart.DataSetList.Add(msDs);

<span style="color:green">//&nbsp;Link&nbsp;the&nbsp;WebControl&nbsp;and&nbsp;the&nbsp;Chart</span>
chtProductSales.ShowChart(oChart);<o:p></o:p></span></pre>
        
        </div>
    </div><br /><br />
    </form>
</body>
</html>
